<!-- 下单确认页 + 订单页 -->
<template>
  <div class="InsertOrders">
    <!-- 导航栏 -->
    <userTopMenu></userTopMenu>

    <!-- 订单详情 -- 下单确认 -->
    <div v-if="flag1">
      <el-descriptions
        class="margin-top"
        title="订单信息确认"
        :column="1"
        size="medium"
        border="true"
        style="font-size: 30px"
      >
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-shop"></i>
            交易对象
          </template>
          {{ nameOfFirst }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            下单人
          </template>
          {{ userName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-finance"></i>
            订单总金额（实际金额下单后查看）
          </template>
          {{ orders.orderTotalAmount }}元
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-scissors"></i>
            是否使用折扣次数（五折）
          </template>
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-descriptions-item>
      </el-descriptions>
      <el-button
        type="primary"
        size="medium"
        style="font-size: 50px; margin-top: 50px; margin-left: 40%"
        @click="insertOrder()"
        >确认无误</el-button
      >
    </div>

    <!-- 订单详情 -- 下单后展示 -->
    <div v-if="flag2">
      <orderServerLists :orderId="orderId"></orderServerLists>
    </div>
  </div>
</template>

<script>
import userTopMenu from "@/components/menu/userTopMenu.vue";
import orderServerLists from "@/components/lists/orderServerLists.vue";
export default {
  name: "insertorders",
  components: {
    userTopMenu,
    orderServerLists,
  },
  data() {
    return {
      // 请求参数
      orders: { isDiscount: 0 },
      //   结果集
      orderId: 1,
      //   其他参数
      nameOfFirst: "",
      userName: "",
      flag1: true,
      flag2: false,
      value:false,
    };
  },
  methods: {
    // 获取参数
    getParams() {
      // 请求参数
      this.orders.userId = localStorage.getItem("USERID");
      this.orders.orderStatus = this.$route.params.ordersBasic.orderStatus;
      this.orders.transactionType =
        this.$route.params.ordersBasic.transactionType;
      this.orders.transactionId = this.$route.params.ordersBasic.transactionId;
      this.orders.orderTotalAmount =
        this.$route.params.ordersBasic.orderTotalAmount;
      // 其他数据
      this.nameOfFirst = this.$route.params.ordersBasic.Name;
      this.userName = localStorage.getItem("USERNAME");
    },

    // 下单
    insertOrder() {
      //   console.log("insertOrder:");
      //   console.log(this.orders);
      this.$api.ordersApi.insertOrder(this.orders).then((res) => {
        if (res.data.code == 1) {
          // 子组件传参
          this.orderId = res.data.data.orderId;
          
          alert("下单成功！");
          this.changeShow();
        } else alert("下单失败！");
      });
    },

    // 修改展示项
    changeShow() {
      this.flag1 = false;
      this.flag2 = true;
    },
  },
  watch: {
    // 是否折扣，通过监视value的变化动态修改isDiscount的值
    value(newV,oldV){
        console.log(newV);
        if(newV == true)this.orders.isDiscount = 1;
        else this.orders.isDiscount = 0;
    }
  },
  mounted() {
    this.getParams();
  },
};
</script>

<style scoped>
/* home */
* {
  padding: 0;
  margin: 0;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.InsertOrders {
  font-family: "maobi";
  font-size: 20px;
  color: #a09e9c;
  text-transform: initial;
  max-width: 1920px;
  margin: 0 auto;
  overflow-x: hidden;
}
</style>
